<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="record"
      border
      style="width: 100%"
    >      <el-table-column
             type="index"
             label="序号"
             align="center"
             width="80"
           />
      <el-table-column
        type="title"
        label="文章名称"
        align="center"
        width="80"
      > <template slot-scope="scope">
        <el-popover
          placement="left-start"
          title="预览图"
          width="230"
          trigger="hover"
        >
          <el-image :preview-src-list="srcList" style="width: 200px;min-height: 200px" :src="scope.row.thumb" fit="contain" />
          <a slot="reference" href="#" target="_blank" @click.prevent="goToSrc(scope.row)">{{ scope.row.title }}</a>
        </el-popover>
      </template></el-table-column>
      <el-table-column
        prop="description"
        label="文章描述"
        align="center"
        width="180"
      />
      <el-table-column
        prop="scanNumber"
        label="浏览数"
        align="center"
      />
      <el-table-column
        prop="commentNumber"
        label="评论量"
        align="center"
      />
      <el-table-column
        prop="category['name']"
        label="所属分类"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.category.name === null ? '未分类' : scope.row.category.name }}
        </template>
      </el-table-column>
      <el-table-column
        prop="createDate"
        label="创建日期"
        align="center"
      >
        <template slot-scope="scope">
          {{ formatDate(scope.row.createDate) }}
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
      >
        <template slot-scope="scope">
          <el-button circle icon="el-icon-edit" type="primary" @click="edit(scope.row)" />
          <el-button circle icon="el-icon-delete" type="danger" @click="remove(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <!--    // 分页-->
    <el-pagination
      style="margin-top: 30px"
      background
      :page-size="site.limit"
      :page-sizes="[5, 10, 20]"
      layout="prev, pager, next, total, ->, sizes, jumper"
      :total="total"
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
    />
  </div>
</template>

<script>
import { findBlog, deleteBlog } from '@/api/blog'
import { formatDate } from '@/utils/tools/formatDate'

export default {
  name: 'Index',
  data() {
    return {
      record: [],
      total: 0, // 总条数
      site: {
        page: 1, // 当前页
        limit: 5 // 显示条数
      },
      totalPage: 0, // 总页数
      srcList: [], // 预览图链接数组
      listLoading: false // 表格加载
    }
  },
  async created() {
    this.listLoading = true
    await this.fetchData()
    this.listLoading = false
  },
  methods: {
    formatDate,
    async fetchData() {
      const data = await findBlog(this.site)
      if (!data.data) {
        this.total = 0
        this.totalPage = 1
        this.$message({
          type: 'warning',
          message: '暂无数据'
        })
        return
      }
      this.record = data.data.rows.map((item) => {
        this.srcList.push(item.thumb)
        return item
      })
      this.total = data.data.total
      this.totalPage = Math.ceil(this.total / this.site.limit)
      if (this.site.page > this.totalPage) {
        // 删除文章的时候可能会触发
        this.site.page = this.totalPage
        await this.fetchData()
      }
    },
    goToSrc(scope) {
      // 跳转到具体的文章
      window.open(`/Blog/${scope.id}`)
    },
    edit(scope) {
      // 编辑
      this.$router.push({
        path: '/article/edit',
        query: { id: scope.id }
      })
    },
    async remove(scope) {
      // 删除
      this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteBlog(scope.id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        await this.fetchData()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    async  sizeChangeHandle(num) {
      // 下拉选择多少条每页改变
      this.site.limit = num
      await this.fetchData()
    },
    async currentChangeHandle(num) {
      this.site.page = num
      // page改变时发送
      await this.fetchData()
    }
    // prevClickHandle(num) {
    //   // 上一页
    //   this.site.page = num
    // },
    // nextClickHandle(num) {
    //   // 下一页
    //   this.site.page = num
    // }
  }
}
</script>

<style scoped>

</style>
